import classNames from "classnames";
import "./list.scss";

type ListProps = {
  children: React.ReactElement | React.ReactElement[];
  className?: string;
};

export const List = ({
  children,
  className = "",
  ...rest
}: ListProps): React.ReactElement => {
  return (
    <>
      <div className={classNames("dashboard_list_box", className)} {...rest}>
        <ul className="dashboard_list">{children}</ul>
      </div>
    </>
  );
};

type ListItemProps = {
  children: string | React.ReactElement | React.ReactElement[];
  className?: string;
  onClick?: () => void;
};

const Item = ({
  children,
  className = "",
  onClick,
  ...rest
}: ListItemProps): React.ReactElement => {
  const handleClick = () => {
    onClick?.();
  };
  return (
    <>
      <li
        className={classNames("dashboard_list_item", className)}
        {...rest}
        onClick={handleClick}
      >
        {children}
      </li>
    </>
  );
};

List.Item = Item;
